<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!--
js 比较和逻辑运算符用于测试 true 或 false
if (age<18) text = "太年轻"
逻辑运算符 用于判定变量或值之间的逻辑
&& 与 (x<10 && y>1) 为 true
|| 或 (x==1 || y==1) 为 true
! 非 (x!=y) 为 true

条件三元 运算符 基于某些条件 向变量赋值的条件运算符
var x = (age<18) ? "太年轻" : "太老";

比较不同的类型
当比较两个字符串,2大于12 因为按照字母排序 1小于2
js 条件 条件语句用于基于不同条件执行不同的动作
在js中 我们可使用如下条件语句
使用 if 来规定要执行的代码块 如果指定条件rue
使用 else 来规定要执行代码块 如果指定条件为false
使用 else if 来规定新的条件 如果第一个条件为false
switch (表达式) {}

使用if 语句 规定假如条件为true 执行代码块 js块
if (条件) {
  如果条件为true 执行代码
}

else 语句
if (条件) {
  条件为true 执行代码
} else {
  条件为false 执行代码
}

else if 语句
if (条件1){
  条件1为true 执行代码
} else if (条件2) {
  条件1为false 条件2为true 执行代码
} else{
  条件1为false 条件2为false 执行代码
}

js switch 语句
switch (表达式) {
  case n:
    代码块
    break;
  case n:
    代码块
    break;
  default:
    默认代码块
}
计算一次 switch 表达式
把表达式的值与每个case的值进行对比
如果存在匹配,则执行关联代码
getDay() 方法返回0至6之间的周名数字
break 关键词
如果 js 遇到 break 关键词 则跳出 switch 语句
default 关键词
default 关键词规定不存在case匹配时所运行的代码

switch case 使用严格比较 === 只有操作数属于同一类型时,严格比较才能为true

for 循环 循环可多次执行代码块
for (i=0;i<cars.length;i++){
  text += cars[i] + "<br>";
}

js 支持不同类型的循环
for 多次循环代码块
  for (语句1;语句2;语句3){
    要执行的代码块
  }
for / in 循环对象属性
while 循环代码块
do / while 循环代码块

语句1 来初始化循环中所使用的变量 (i=0)
for (i = 0, len = cars.length, text = ""; i < len; i++)

For ln 循环 遍历数组
索引顺序很重要 依赖于实现 可能不会按照您期望的访问顺序访问数组元素

Array.isArray() 方法用于判断对象是否为数组 ,forEach() 方法为每个数组元素调用一次函数 回调函数
For Of 循环 遍历可迭代对象的值 它允许循环遍历可迭代的数据结构 (例如:数组,字符串,集合,类数组对象,DOM 集合)

js while 循环 只要条件为true 循环能够一直执行代码块
while 循环
while (条件){
  要执行的代码块
}
如果条件中使用的变量进行递增,那么循环永不结束,会导致浏览器崩溃

Do /while 循环
do/while 循环是while 循环的变体 检查条件是否为真之前,这种循环会执行一次代码块,然后只要条件为真就会重复循环
do {
  要执行的代码块
}
while (条件)

使用 do/while 循环 该循环会执行至少一次 即使条件为 false 因为代码块会在条件测试之前执行
break 语句 跳出 循环
continue 语句 跳出 循环中的一个迭代

break 语句会中断循环 并继续执行循环之后的代码
continue 语句 跳出 循环中的一个迭代 如果发生指定的条件 然后继续循环中的下一个迭代
js 标签
如需 js语句 请将标签名 和冒号置于语句之前
break Labelname;
  无论是否有无标签引用 只能用于跳过一个迭代
continue Labelname;
  不论有无标签引用 只能用于跳过一个迭代

代码块指的是 {与}直接的代码片段


typeof 运算符
typeof "Bill"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof NaN                    // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'Bill', age:19}  // 返回 "object"
typeof new Date()             // 返回 "object"
typeof function () {}         // 返回 "function"
typeof myCar                  // 返回 "undefined" *
typeof null                   // 返回 "object"

NaN 的数据类型是数字
数组的数据类型是对象
日期的数据类型是对象
null 的数据类型是 object
未定义变量的数据类型为 undefined
未赋值的变量的数据类型也是 undefined
typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (if x has no value)


typeof {name:'Bill', age:19} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object"（非 "array"，请注意下面的例子）
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

typeof 运算符会为数组返回 "object"，因为在js中数组是对象
typeof 运算符并不是变量 只是一个运算符 运算符(+-*/)没有任何数据类型

constructor 属性返回所有 js 变量的构造函数
"Bill".constructor                // 返回 function String()  {[native code]}
(3.14).constructor                // 返回 function Number()  {[native code]}
false.constructor                 // 返回 function Boolean() {[native code]}
[1,2,3,4].constructor             // 返回 function Array()   {[native code]}
{name:'Bill',age:19}.constructor  // 返回 function Object()  {[native code]}
new Date().constructor            // 返回 function Date()    {[native code]}
function () {}.constructor        // 返回 function Function(){[native code]}

检查 constructor 属性以确定对象是否为数组 包含Array
Underfined 没有值的变量的值 类型也是 underfined
let car; // 值是undefined 类型是underfined
空值
let car = ""; // 值是"",类型是 string
Null 在js 中null 即无 它应该是不存在的东西

undefined 和 null 的区别
typeof undefined; // undefined
typeof null; // object
null === undefined; // false
null == undefined; // true


-->
<body>
<p>可以通过将值设置为<b>null</b>来清空对象.</p>
<p id="demo28"></p>

<p>这个自制的 isArray() 函数在数组上 使用时返回 true: </p>
<p id="demo26"></p>

<p>带break的循环</p>
<p id="demo23"></p>

<p>js do...while</p>
<p id="demo22"></p>


<p>js while</p>
<p id="demo21"></p>

<p>for of语句循环遍历任何可迭代对象的值</p>
<p id="demo10"></p>


<p>输入年龄然后点击这个按钮:</p>
<input id="age" value="18"/>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>

<p>如果小时小于18:00,显示美好的一天!</p>
<p id="demo1">晚安</p>

<p>点击按钮显示基于时间的问候语:</p>
<button onclick="myFunction1()">试一试</button>
<p id="demo2"></p>

<p>显示当前日期:</p>
<p id="demo3"></p>

<p>默认展示日期:</p>
<p id="demo4"></p>

<p>查找值:</p>
<p id="demo5"></p>

<p>js 循环</p>
<p id="demo6"></p>

<P>for/in 语句循环遍历对象的属性:</P>
<p id="demo7"></p>

<p>for in语句可以遍历数组值:</p>
<p id="demo8"></p>

<p>为每个数组元素调用一次函数.</p>
<p id="demo9"></p>

<p>for of 语句循环遍历可迭代对象的值:</p>
<p id="demo11"></p>

<p>这个循环在 i=3 时跳过这一步:</p>
<p id="demo24"></p>

<p>js break</p>
<p id="demo25"></p>

<p>这个自制的 isDate()函数在日期上使用时返回 true:</p>
<p id="demo27"></p>

<script>
  let person1 = {
    firstName:"Bill",
    lastName:"Gates",
    age: 50,
    eyeColor:"blue"
  };
  person1 = null;
  document.getElementById("demo28").innerHTML = typeof person1;

  const myDate = new Date();
  document.getElementById("demo4").innerHTML = isDate(myDate);

  // 判断日期是否是日期
  function isDate(myDate){
    return myDate.constructor.toString().indexOf("Date") > -1;
  }

  const fruits = ["Banana","Orange","Apple","Mango"];
  document.getElementById("demo26").innerHTML = Array.isArray(fruits);

  // 自定义数组
  function isArray(myArray){
    return myArray.constructor.toString().indexOf("Array") > -1;
  }

  // 判断数组
  // function isArray(myArray){
  //   return myArray.constructor === Array;
  // }

  // 检查 constructor 属性以确定对象是否为日期 包含Date 一词


  var cars1 = ["BMW","Volvo","Porsche","Ford","Fiat","Audi"];
  var text8 = "";

  list: {
    text8 += cars1[0] + "<br>";
    text8 += cars1[1] + "<br>";
    break list;
    text8 += cars1[2] + "<br>";
    text8 += cars1[3] + "<br>";
  }
  document.getElementById("demo25").innerHTML = text8;

  var text7 = "";
  var i;
  for (i=0;i<10;i++){
    if(i===3){continue;}
    text7 += "数字是" + i + "<br>";
  }
  document.getElementById("demo24").innerHTML = text7;

  var text6 = "";
  var i;
  for (i=0;i<10;i++){
    if(i===3){break;}
    text6 += "数字是" + i + "<br>";
  }
  document.getElementById("demo23").innerHTML = text6;

  var text5 = "";
  var k = 0;
  do {
    text5 += "<br>数字是" + k;
    k++;
  }
  while (k < 10);
  document.getElementById("demo22").innerHTML = text5;


  var text4 = "";
  var i = 0;
  while (i<10){
    text4 += "<br>数字是" + i;
    i++;
  }
  document.getElementById("demo21").innerHTML= text4;

  let language = "JavaScript";
  let text3 = "";
  for (let x of language){
    text3 += x + "<br>";
  }
  document.getElementById("demo11").innerHTML = text3;

  const cars1 = ["BMW","Volvo","Porsche","Ford","Fiat","Audi"];
  let text2 = "";
  for (let x of cars1){
    text2 += x + "<br>";
  }
  document.getElementById("demo10").innerHTML = text2;

  const numbers = [45,46,47,48,49,50];
  let txt1 = "";
  for (let x in numbers){
    txt1 += numbers[x] + "<br>";
  }
  document.getElementById("demo8").innerHTML = txt1;
  numbers.forEach(myFunction);
  document.getElementById("demo9").innerHTML = txt1;
  function myFunction(value,index,array){
    txt1 += value + "<br>";
  }
  var txt = "";
  var person = {fname:"John",lname:"Doe",age:25};
  var x;
  for (x in person){
    txt += person[x] + " ";
  }
  document.getElementById("demo7").innerHTML = txt;
  var cars = ["BMW","Volvo","porsche","Ford","Fiat","Audi"];
  var i,len,text;
  for (i=0,len=cars.length,text="";i<len;i++){
    text += cars[i] + "<br>";
  }
  // 写法2
  var i = 2;
  var len=cars.length;
  var text="";
  for (;i<len;i++){
    text += cars[i] + "<br>";
  }

  document.getElementById("demo6").innerHTML = text;
  var x = "0";
  switch (x){
    case 0:
      text = "Off";
      break;
    case 1:
      text = "On";
      break;
    default:
      text = "未找到值";
  }
  document.getElementById("demo5").innerHTML = text;
  var text;
  switch (new Date().getDay()){
    case 6:
      text = "今天是周六";
      break;
    case 0:
      text = "今天是周日";
      break;
    default:
      text = "期待周末";
  }
  document.getElementById("demo4").innerHTML = text;
  var day;
  switch (new Date().getDay()){
    case 0:
      day = "星期日";
      break;
    case 1:
      day = "星期一";
      break;
    case 2:
      day = "星期二";
      break;
    case 3:
      day = "星期三";
      break;
    case 4:
      day = "星期四";
      break;
    case 5:
      day = "星期五";
      break;
    case 6:
      day = "星期六";
      break;
  }
  document.getElementById("demo3").innerHTML ="今天是"+ day;
  function myFunction1() {
    var hour = new Date().getHours();
    var greeting;
    if (hour<10){
      greeting = "早安";
    }
    else {
      greeting = "晚安";
    }
    document.getElementById("demo2").innerHTML=greeting;
  }

  if(new Date().getHours()<18){
    document.getElementById("demo1").innerHTML="美好的一天!";
  }
  function myFunction() {
    var age, voteable;
    age = document.getElementById("age").value;
    if (isNaN(age)){
      voteable = "输入值不是数字";
    } else {
      voteable = (age < 18) ? "太年轻" : "太老";
    }
    document.getElementById("demo").innerHTML = voteable;
  }
</script>
</body>
</html>
